<template>
	<view class="tidalCard u-skeleton">
		<!-- #ifdef APP-PLUS -->
		<view class="nav-Height"></view>
		<!-- #endif -->
		<view class="title">
			<view class="txt" v-for="(item,index) in list" :key="index" :style="{
				'opacity': current == index ? '1' : '.5'
			}" @click="topSelect(index)">{{item.title}}</view>
		</view>
		<view class="box-ani">
			<diy-animation :image="config.images"></diy-animation>
			<view class="ani-poi">
				<diy-mainland-animation></diy-mainland-animation>
				<view class="ani-poi-box">
					<!-- <diy-light></diy-light> -->
					<view class="box-ani-flex">
						<!-- 轮播 -->
					</view>
				</view>
			</view>
		</view>
		<diy-light></diy-light>
		<view class="ani-info">
			<!-- <image class="i-img i-img1" :src="$util.img('/static/img/card/角标.png')" mode="heightFix"></image>
			<image class="i-img i-img2" :src="$util.img('/static/img/card/角标.png')" mode="heightFix"></image> -->
			<!-- <view class="i-item i-item-left" :style="{
				'background-image':'url(' + $util.img('/static/img/card/x4-1.png') + ')'
			}">
				<text>{{$store.state.jb}}*{{config.medals}}</text>
				<image class="iil-img" style="margin:-10px 0 0 20px ;" :src="$util.img('/static/img/card/金币.png')" mode="widthFix"></image>
			</view>
			<view class="i-item i-item-right" :style="{
				'background-image':'url(' + $util.img('/static/img/card/x4.png') + ')'}">
				<image class="iil-img" :src="$util.img('/static/img/card/PNG2.png')" mode="widthFix"></image>
				<text>潮卡*{{config.num}}</text>
			</view> -->
		</view>
		<view class="purchase" :style="{
			'background-image':'url(' + $util.img('/static/img/card/bj.png') + ')'}">
			<view class="top">
				<view class="left" v-if="config">
					<image class="left-img" :src="$util.img(config.icon)" mode="widthFix"></image>
					<!-- <view class="tips">{{config.title}}</view> -->
				</view>
				<view class="right">
					￥{{config.price}}元/张
				</view>
			</view>
			<view class="pu-btn" @click="cardShow = true">
				<img :src="$util.img('/static/img/card/ljshop.png')" mode="widthFix" class="ljshop" />
			</view>
		</view>
		<view class="application">
			<view class="a-title">游戏应用</view>
			<view class="a-box-item">
				<view class="item" v-for="(item,index) in app_material" :key="index" @click="gotolink(item)">
					<u-image class="image" :src="$util.img(item.icon)" mode="aspectFit" width="100" height='100'
						duration='600'></u-image>
					<view class="a-name">{{item.title}}</view>
				</view>
			</view>
			<!-- <view class="a-title">闪卡应用</view>
			<view class="a-box-item">
				<view class="item" v-for="(item,index) in app_flashcard" :key="index" @click="gotolink(item)">
					<u-image class="image" :src="$util.img(item.icon)" mode="aspectFit" width="100" height='100'
						duration='600'></u-image>
					<view class="a-name">{{item.title}}</view>
				</view>
			</view> -->
		</view>

		<!-- <view class="gemstone">
			<view class="left" @click="gemShow = true">
				<image class="img" :src="$util.img('/static/img/card/排行榜.png')" mode="widthFix"></image>
				<view class="txt">{{$store.state.bs}}榜</view>
			</view>
			<view class="right" @click="$util.redirectTo('/pages/tidalcard/playing')">玩法攻略</view>
		</view> -->
		<!-- <view class="ti-bg" :style="{
			'background-image':'url(' + $util.img(mineLevellist.ks_image) + ')'
		}"></view> -->
		<view class="gemstone-btn" :style="{
			'background-image':'url(' + $util.img('/static/img/card/bs-bg.png') + ')'}"
			@click="$util.redirectTo('/pages/tidalcard/myCrystal')">
			<image :src="$util.img('/static/img/card/bs.png')" mode=""></image>
			<text class="t-txt">极客{{$store.state.bs}}</text>
			<text class="t-txt">{{amount}}</text>
		</view>
		<view class="gemsbot">
			<view class="gemsbot-box"  @click="$util.redirectTo('/pages/tidalcard/giftCrystal')">
				<image :src="$util.img('/static/img/card/bszs.png')" mode="heightFix"></image>
			</view>
			<view class="gemsbot-box" @click="$util.redirectTo('/pages/tidalcard/crystalList')">
				<image :src="$util.img('/static/img/card/bsjl.png')" mode="heightFix"></image>
			</view>
			<view class="gemsbot-box" @click="$util.redirectTo('/pages/tidalcard/playing')">
				<image :src="$util.img('/static/img/card/bswf.png')" mode="heightFix"></image>
			</view>
		</view>
		<view class="b-top">
			<view class="b-item" :style="{
			'background-image':(type==0?'url(' + $util.img('/static/img/card/jk-h-1.png') + ')':'url(' + $util.img('/static/img/card/jk-h.png') + ')')}" @click="type = 0">
				
			</view>
			<view class="b-item" :style="{
			'background-image':(type==1?'url(' + $util.img('/static/img/card/le-h-1.png') + ')':'url(' + $util.img('/static/img/card/le-h.png') + ')')}" @click="type = 1">
				
			</view>
		</view>
		<view class="b-img" :style="{
			'background-image':'url(' + $util.img('/static/img/card/bg-t.png') + ')'}">
			<!-- <image :src="$util.img('/static/img/card/bg-t.png')" mode="aspectFit"></image> -->
		</view>
		<view class="bttom-box" :style="{
			'background-image':'url(' + $util.img('/static/img/card/bg-c.png') + ')'}">
			<block v-if="type == 0">
				<view class="bb-num">
					<view class="bb-item" @click="$util.redirectTo('/pages/tidalcard/myfriend')">
						<view class="left">
							<image :src="$util.img('/static/img/card/hy.png')" mode="heightFix"></image>
						</view>
						<view class="right">
							<view class="bbr-txt">{{my_num}}个</view>
							<view class="bbr-txt bbr-bottom">我的好友</view>
						</view>
					</view>
					<view class="bb-item" @click="$util.redirectTo('/pages/my/cardCabinet')">
						<view class="left">
							<image :src="$util.img('/static/img/card/PNG2.png')" mode="heightFix"></image>
						</view>
						<view class="right">
							<view class="bbr-txt">{{my_card_num}}个</view>
							<view class="bbr-txt bbr-bottom">我的闪卡</view>
						</view>
					</view>
				</view>

				<view class="info-box" v-if="beginning.currentData">
					<view class="bottom-title">
						<view class="left">{{ beginning.currentData.name}}</view>
						<view class="right">
							<image :src="$util.img('/static/img/card/bs.png')" mode="widthFix"></image>
							<text>{{beginning.currentData.rate}}/天</text>
						</view>
					</view>
					<view class="ti-bg ti-bg-1" :style="{
						'background-image':'url(' + $util.img( beginning.currentData.image) + ')'
					}">
						<view class="t-item-box" :style="{
							
						}" v-show="beginning.currentData.get_status == 1" v-for="(item,i) in beginning.currentData.people_num" :key="i">
							<view class="txt">+{{beginning.currentData.my_rate}}</view>
							<image class="image" :src="$util.img('/static/img/card/kuang.png')" mode="widthFix"></image>
						</view>

						<view class="content" :style="{
							'background': beginning.currentData.get_status == '1' ? 'none' : ' rgba(0, 0, 0, 0.4)'
						}">
							<block v-if="beginning.currentData.get_status == '1'">
								<view class="top">
									<view class="left">
										<text>累计</text>
										<image :src="$util.img('/static/img/card/bs.png')" mode="widthFix"></image>
										<text>{{beginning.currentData.total_num}}</text>
									</view>
									<view class="right" @click="lookmine(beginning.currentData)">
										<text>{{beginning.currentData.people_num}}人正在挖矿</text>
										<u-icon name="arrow-right" size="28"></u-icon>
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>

				<view class="bottom-title bottom-title-1">
					<view class="left" v-if="beginning.currentData">lv.{{beginning.currentData.level}}</view>
					<view class="right" @click="$util.redirectTo('/pages/tidalcard/introduce',{type:'primary'})">
						<text>玩法介绍</text>
						<u-icon name="arrow-right" color="#fff" size="26"></u-icon>
					</view>
				</view>

				<!-- 别想参数为什么这么传因为懒得改了 -->
				<view class="more" :style="{
					'background-image':'url(' + $util.img('/static/img/card/a-bg.png') + ')'
				}" @click="beginningOpen(1,beginning.nextData.id,beginning.currentData.id,beginning)">
					<block
						v-if="beginning.currentData && (beginning.currentData.level != beginning.nextData.level || beginning.currentData.level == '1')">
						<text
							v-if="beginning.currentData && (beginning.currentData.get_status == 2 || beginning.currentData.get_status == 3)">开始探险</text>
						<text v-else-if="beginning.currentData && beginning.currentData.get_status == 1">升级矿洞</text>
					</block>
					<block v-else>
						<text>已经到了最高等级</text>
					</block>

				</view>

				<view class="info-box" v-if="advanced.currentData">
					<view class="bottom-title">
						<view class="left">{{ advanced.currentData.name}}</view>
						<view class="right">
							<image :src="$util.img('/static/img/card/bs.png')" mode="widthFix"></image>
							<text>{{advanced.currentData.rate}}/天</text>
						</view>
					</view>
					<view class="ti-bg ti-bg-1" :style="{
						'background-image':'url(' + $util.img( advanced.currentData.image) + ')'
					}">
						<view class="t-item-box" :style="{
							
						}" v-show="advanced.currentData.get_status == 1" v-for="(item,i) in advanced.currentData.people_num" :key="i">
							<view class="txt">+{{advanced.currentData.my_rate}}</view>
							<image class="image" :src="$util.img('/static/img/card/kuang.png')" mode="widthFix"></image>
						</view>
						<view class="content" :style="{
							'background': advanced.currentData.get_status == '1' ? 'none' : ' rgba(0, 0, 0, 0.4)'
						}">
							<block v-if="advanced.currentData.get_status == '1'">
								<view class="top">
									<view class="left">
										<text>累计</text>
										<image :src="$util.img('/static/img/card/bs.png')" mode="widthFix"></image>
										<text>{{advanced.currentData.total_num}}</text>
									</view>
									<view class="right" @click="lookmine(advanced.currentData)">
										<text>{{advanced.currentData.people_num}}人正在挖矿</text>
										<u-icon name="arrow-right" size="28"></u-icon>
									</view>
								</view>
							</block>
							<block v-if="advanced.currentData.level < advanced.nextData.level">
								<view class="poi-center-tips">邀请好友开启更多</view>
								<view class="poi-tips-num2">
									<view class="poi-tips-num2-box">
										<text>{{ valid_num }}</text>
										<text>/</text>
										<text>{{advanced.currentData.consume}}</text>
									</view>

									<view class="poi-tips-num2-poi" :style="{
										'width':valid_num > advanced.currentData.consume ? '100%' : valid_num / advanced.currentData.consume * 100 + '%'
									}"></view>
								</view>
							</block>
						</view>
					</view>
				</view>

				<view class="bottom-title bottom-title-1">
					<view class="left" v-if="advanced.currentData">lv.{{advanced.currentData.level}}</view>
					<view class="right" @click="$util.redirectTo('/pages/tidalcard/introduce',{type:'advanced'})">
						<text>玩法介绍</text>
						<u-icon name="arrow-right" color="#fff" size="26"></u-icon>
					</view>
				</view>

				<view class="ti-bg-info"
					:style="{'background-image':'url(' + $util.img('/static/img/card/a-bg.png') + ')'}"
					@click="advancedOpen">
					<text v-if="advanced.currentData && advanced.currentData.get_status == 2">邀请好友组队,即可开启挖矿</text>
					<text v-else>邀请更多好友组队加速挖矿</text>
				</view>

				<view class="info-box" v-if="higher.currentData">
					<view class="bottom-title">
						<view class="left">{{ higher.currentData.name}}</view>
						<view class="right">
							<image :src="$util.img('/static/img/card/bs.png')" mode="widthFix"></image>
							<text>{{higher.currentData.rate}}/天</text>
						</view>
					</view>
					<view class="ti-bg ti-bg-1" :style="{
						'background-image':'url(' + $util.img( higher.currentData.image) + ')'
					}">
						<view class="t-item-box" :style="{
							'left': 315 * Math.random() + 'rpx',
							'bottom': 180 * Math.random() + 'rpx'
						}" v-show="higher.currentData.get_status == 1" v-for="(item,i) in higher.currentData.people_num" :key="i">
							<view class="txt">+{{higher.currentData.my_rate}}</view>
							<image class="image" :src="$util.img('/static/img/card/kuang.png')" mode="widthFix"></image>
						</view>

						<view class="content" :style="{
							'background': higher.currentData.get_status == 1 ? 'none' : ' rgba(0, 0, 0, 0.4)'
						}">
							<block v-if="higher.currentData.get_status == '1'">
								<view class="top">
									<view class="left">
										<text>累计</text>
										<image :src="$util.img('/static/img/card/bs.png')" mode="widthFix"></image>
										<text>{{higher.currentData.total_num}}</text>
									</view>
									<view class="right" @click="lookmine(higher.currentData)">
										<text>{{higher.currentData.people_num}}人正在挖矿</text>
										<u-icon name="arrow-right" size="28"></u-icon>
									</view>
								</view>
							</block>

							<block v-else>
								<view class="poi-tips-num">
									<text>组队挖矿</text>
									<image :src="$util.img('/static/img/card/bs.png')" mode="widthFix"></image>
									<text>{{higher.currentData.consume}}</text>
									<text>即可开启</text>
								</view>
								<view class="poi-tips-num2">
									<view class="poi-tips-num2-box">
										<text>{{ advanced.currentData.total_num }}</text>
										<text>/</text>
										<text>{{higher.nextData.consume}}</text>
									</view>

									<view class="poi-tips-num2-poi" :style="{
										'width':advanced.currentData.total_num > higher.nextData.consume ? '100%' : advanced.currentData.total_num / higher.nextData.consume * 100 + '%'
									}"></view>
								</view>
							</block>
						</view>
					</view>
				</view>

				<view class="bottom-title bottom-title-1">
					<view class="left" v-if="higher.currentData">lv.{{higher.currentData.level}}</view>
					<view class="right" @click="$util.redirectTo('/pages/tidalcard/introduce',{type:'high'})">
						<text>玩法介绍</text>
						<u-icon name="arrow-right" color="#fff" size="26"></u-icon>
					</view>
				</view>
				<view class="more" :style="{
					'background-image':'url(' + $util.img('/static/img/card/a-bg.png') + ')'
				}" @click="beginningOpen(3,higher.nextData.id,higher.currentData.id,higher)">
					<block
						v-if="higher.currentData && (higher.currentData.level != higher.nextData.level || higher.currentData.level == '1')">
						<text
							v-if="higher.currentData && (higher.currentData.get_status == 2 || higher.currentData.get_status == 3)">开始探险</text>
						<text v-else-if="higher.currentData && higher.currentData.get_status == 1">升级机甲</text>
					</block>
					<block v-else>
						<text>已经到了最高等级</text>
					</block>
				</view>
			</block>
			<block v-else>
				<view class="payCard">
					<view class="p-left">
						<image class="iil-img" :src="$util.img('/static/img/card/PNG2.png')" mode="heightFix"></image>
						<view class="txt">我的卡片：{{my_card_num}}</view>
					</view>
					<view class="p-right" @click="cardShow = true">购买闪卡</view>
				</view>
				<view class="ti-bg ti-bg-1" :style="{
					'background-image':'url(' + $util.img('/static/img/card/z-copy.png') + ')'}">
					<view class="p-content">
						<view class="cc-center" @click="$util.redirectTo('/pages/tidalcard/listOfMines')">
							<u-icon name="plus-circle" size='36'></u-icon>
							<text>开启新地图</text>
						</view>
					</view>
				</view>
				<diy-mine :minelist="minelist" @open='lookmine'></diy-mine>
			</block>
		</view>
		<view class="b-img" :style="{
			'background-image':'url(' + $util.img('/static/img/card/bg-o.png') + ')'}">
			<!-- <image :src="$util.img('/static/img/card/bg-t.png')" mode="aspectFit"></image> -->
		</view>
		<view style="padding: 20rpx 0;">
			<view style="text-align: center;color: #fff;margin-top:10rpx;font-size: 24rpx;">技术支持 @ 极客科技</view>
		</view>

		<!-- 买卡的弹窗 -->
		<diy-card :show='cardShow' @close='cardShow = false' :config='config' @setShow='openManager'></diy-card>
		<!-- 版权弹窗 -->
		<diy-copy-right :show='copyShow' @close='close'></diy-copy-right>
		<!-- 店长弹窗 -->
		<diy-manager :managerShow='managerShow' @close="managerShow = false" :managerList="managerList"></diy-manager>
		<!-- 底部导航 -->
		<diy-tabbar current="tidalCard"></diy-tabbar>
		<!-- 排行榜 -->
		<diy-gem-list :show='gemShow' @close='gemclose' @setContactShow='setContactShow'></diy-gem-list>
		<!-- 联系对方的弹窗 -->
		<diy-gem-contact :show='contactShow' @close='contactClose' :contactObj='contactObj'></diy-gem-contact>
		<!-- 开启探索的弹窗 -->
		<diy-mine-mining :mineShow="mineShow" @mineclose='mineShow = false'></diy-mine-mining>
		<!-- 点击人数开启弹窗 -->
		<diy-look-mine ref='lookmine' :lookmineShow="lookmineShow" @mineclose='lookmineShow = false'></diy-look-mine>
		<!-- 请输入支付密码 -->
		<pay-popup @changeCode="changeCode" ref="paypopup"></pay-popup>
	</view>
</template>

<script>
	import diyAnimation from '../../components/diy-animation/diy-animation.vue'
	import diyLight from '../../components/diy-animation/diy-light.vue'
	import diyMainlandAnimation from '../../components/diyMainlandAnimation/diyMainlandAnimation.vue'
	import diyCard from "../../components/diy-card/diy-card.vue"
	import diyCopyRight from "../../components/diy-copyright/diy-copyright.vue"
	import diyManager from "../../components/diy-manager/diy-manager.vue"
	import diyGemList from "../../components/diy-gem-list/diy-gem-list.vue"
	import diyGemContact from "../../components/diy-gem-list/diy-gem-contact.vue"
	import diyMine from "../../components/diy-mine/diy-mine.vue"
	import diyMineMining from "../../components/diy-mine-mining/diy-mine-mining.vue"
	import diyLookMine from "../../components/diy-look-mine/diy-look-mine.vue"
	import payPopup from "../../components/pay-popup/pay-popup.vue"
	export default {
		components: {
			diyAnimation,
			diyLight,
			diyMainlandAnimation,
			diyCard,
			diyCopyRight,
			diyManager,
			diyGemList,
			diyGemContact,
			diyMine,
			diyMineMining,
			diyLookMine,
			payPopup
		},
		data() {
			return {
				//顶部选项
				current: 0,
				type: 0,
				list: [{
					title: '潮卡'
				}, {
					title: '商业版权'
				}, ],
				//买卡弹窗控制
				cardShow: false,
				//版权弹窗控制
				copyShow: false,
				//上面跳动的图片
				listImg: [],
				//闪卡的数量、售价
				config: {},
				//店长弹窗
				managerShow: false,
				//店长列表
				managerList: [],
				// 材料应用
				app_material: [],
				// 闪卡应用
				app_flashcard: [],
				//排行榜
				gemShow: false,
				//联系弹窗
				contactShow: false,
				// 联系人的数据
				contactObj: {},
				//宝石
				amount: 0,
				//好友数量
				my_num: 0,
				// 闪卡数量
				my_card_num: 0,
				//矿区列表
				minelist: [],
				//矿山列表
				mineLevellist: {},
				//矿山初级数据
				beginning: {},
				//矿山中级数据
				advanced: {},
				//矿山高级数据
				higher: {},
				//开启矿坑的弹窗
				mineShow: false,
				//矿坑提示弹窗
				lookmineShow: false,
				// 支付密码弹窗打开
				payShow: false,
				//个人信息
				valid_num: {}
			}
		},
		onLoad() {
			//#ifdef APP 
			uni.hideTabBar()
			//#endif
		},
		onShow() {
			this.$nextTick(() => {
				this.setConfig();
				this.getlist();
			})
		},
		methods: {
			changeCode(obj) {
				this.setopenMineMount(obj)
			},
			gotolink(item) {
				if (!item.url.includes('https')) {
					this.$util.taost({
						title: '敬请期待',
						callback: v => {}
					})
				} else {
					let token = uni.getStorageSync('token');
					// #ifdef H5
					// location.href = item.url;
					// this.$util.redirectTo('/pages/web-view', {
					// 	url: item.url,
					// 	token
					// })
					location.href = item.url + '?token=' + token;
					// #endif
					// #ifdef APP
					this.$util.redirectTo('/pages/web-view', {
						url: item.url,
						token
					})
					// #endif
				}
			},
			//顶部切换功能
			topSelect(index) {
				this.current = index;
				this.copyShow = true;
			},
			// 顶部弹簧关闭回调
			close() {
				this.current = 0;
				this.copyShow = false;
			},
			//排行榜弹窗关闭
			gemclose(callbak) {
				this.gemShow = false;
				if (typeof callbak == 'function') callbak();
			},
			//或许页面大致数据
			async setConfig() {
				let boredApe = await this.$http.sendrequest({
					url: '/goods/flashcardConfig'
				});
				this.config = boredApe.data.config;
				this.app_material = boredApe.data.app_material;
				this.app_flashcard = boredApe.data.app_flashcard;
				this.amount = boredApe.data.amount;
				//好友数量
				this.my_num = boredApe.data.my_num;
				// 闪卡数量
				this.my_card_num = boredApe.data.my_card_num;
			},
			//获取店长弹窗
			openManager(data) {
				if (data.length > 10) {
					this.managerList = data.splice(0, 10);
				} else this.managerList = data;

				this.managerShow = true;
			},
			//联系对方的弹窗关闭
			contactClose() {
				this.contactShow = false;
			},
			//打开店长弹窗
			setContactShow(data) {
				this.gemclose(() => {
					this.contactShow = true;
					this.contactObj = data;
				});
			},
			// 矿场列表
			async getlist() {
				let res = await this.$http.sendrequest({
					url: '/profile/mineSpaceList'
				});
				this.minelist = res.data;

				let lsitres = await this.$http.sendrequest({
					url: '/goods/mineMountList'
				});

				let info = await this.$http.sendrequest({
					url: '/profile/userInfo'
				});
				this.valid_num = info.data.valid_num;
				this.mineLevellist = lsitres.data;
				this.beginning = lsitres.data.beginning;
				this.advanced = lsitres.data.advanced;
				this.higher = lsitres.data.higher;
			},
			//进阶挖矿
			advancedOpen() {

				let currentData = JSON.parse(JSON.stringify(this.advanced.currentData)),
					nextData = JSON.parse(JSON.stringify(this.advanced.nextData));
				//未开启
				if (currentData.get_status == 2) {
					//邀请人数小于需要人数
					if (this.valid_num < currentData.consume) {
						this.$util.redirectTo('/pages/my/poster')
						return false;
					}
				} else {
					//已经开始
					if (this.valid_num < nextData.consume) {
						this.$util.redirectTo('/pages/my/poster')
						return false;
					}
				}
				this.beginningOpen(2, nextData.id, currentData.id, this.advanced)
			},
			//弹窗
			beginningOpen(type, next_id, current_id, obj) {
				switch (obj.currentData.get_status) {
					case 2:
						next_id = obj.currentData.id;
						break;
				}
				this.$refs.paypopup.open(type, next_id, current_id)
			},
			// 开启矿山提示弹窗
			lookmine(item) {
				this.$refs.lookmine.setinfo(item);
			},
			//矿坑
			setopenMineMount(obj) {
				this.$http.asyncSendrequest({
					url: '/profile/openMineMount',
					data: {
						...obj
					},
					success: res => {
						this.$util.taost({
							title: res.msg,
							callback: v => {
								switch (res.code) {
									case 0:
										this.setConfig();
										this.getlist();
										this.$refs.paypopup.close();
										break;
									case 10:
										uni.showModal({
											title: '',
											content: '是否需要购买闪卡？',
											success: (res) => {
												if (res.confirm) this.cardShow = true;
											}
										});
										break;
									case 11:
										uni.showModal({
											title: '',
											content: '是否邀请好友？',
											success: (res) => {
												if (res.confirm) this.$util.redirectTo(
													'/pages/my/poster')
											}
										});
										break;
									case 12:
										// uni.showModal({
										// 	title: '',
										// 	content: '是否需要购买宝石？',
										// 	success: (res) => {
										// 		// if (res.confirm) 
										// 	}
										// });
										break;
								}
							}
						})

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tidalCard {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(180deg, #292929, #13131A);
		padding: 42rpx 0 140rpx;

		.title {
			margin: 0 30rpx 42rpx;
			display: flex;
			align-items: center;

			.txt {
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				opacity: 0.5;
				margin-right: 62rpx;
			}
		}

		.box-ani {
			position: relative;
			width: 100vw;
			overflow: hidden;

			.ani-poi {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;

				.ani-poi-box {
					width: 100%;
					height: 100%;
					position: relative;

					.box-ani-flex {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}

		.ani-info {
			margin: -80rpx 60rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 80rpx;

			.i-img {
				position: absolute;
				top: -30rpx;
				height: 60rpx;
			}

			.i-img1 {
				left: -10rpx;
			}

			.i-img2 {
				right: -10rpx;
			}

			.i-item {
				width: 310rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				box-sizing: border-box;
				background-repeat: no-repeat;
				background-size: 100% 100%;

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #AB7938;
				}

				.iil-img {
					width: 70rpx;
					margin: -20rpx 40rpx 0 0;

				}
			}

			.i-item-left {
				padding: 0 35rpx 0 50rpx;
			}

			.i-item-right {
				width: 50%;
				padding: 0 50rpx 0;
			}
		}

		.purchase {
			margin: 30rpx 30rpx 0;
			padding: 34rpx 72rpx 0 55rpx;
			box-sizing: border-box;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 230rpx;
			position: relative;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.left-img {
						width: 40rpx;
						margin-right: 34rpx;
					}

					.tips {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
				}

				.right {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			.pu-btn {
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				margin-top: 8rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.application {
			margin: 40rpx 30rpx 0;
			min-height: 200rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx 40rpx;
			box-sizing: border-box;

			.a-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.a-box-item {
				width: 100%;
				display: flex;
				margin-top: 36rpx;
				align-items: center;
				overflow-x: scroll;

				.item {
					margin: 0 40rpx 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 10rpx;
						margin-bottom: 15rpx;
					}

					.a-name {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						text-align: center;
						width: 120rpx;
					}
				}

				.item:last-child {
					margin-right: 0;
				}
			}
		}

		.gemstone {
			margin: 46rpx 30rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}

				.txt {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			.right {
				width: 160rpx;
				height: 50rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 50rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.ti-bg {
			height: 300rpx;
			background: linear-gradient(90deg, #41A1F7 0%, #64D2F1 100%);
			border-radius: 20rpx;
			margin: 0 30rpx 30rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.ti-bg-1 {
			margin-top: 30rpx;
			padding: 32rpx 16rpx;
			box-sizing: border-box;
			position: relative;
			display: flex;
			justify-content: center;
			.title {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: right;

				text {
					margin-right: 10rpx;
					margin-bottom: 3rpx;
				}
			}

			.center {
				width: 100%;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				font-weight: bold;
			}

			.content {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 9;
				padding: 30rpx;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #fff;
						font-size: 24rpx;

						image {
							width: 40rpx;
							margin: 4rpx 20rpx 0;
						}
					}

					.right {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #fff;

						text {
							margin: 0 10rpx 4rpx 0;
						}
					}
				}

				.poi-center-tips {
					margin-top: 60rpx;
					font-size: 40rpx;
					color: #f9d6ae;
					font-weight: bold;
					text-align: center;
				}

				.poi-tips-num {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: rgba(255, 255, 255, 0.8);
					margin-top: 60rpx;

					image {
						width: 40rpx;
						margin: 0 10rpx;
					}
				}

				.poi-tips-num2 {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 30rpx;
					border: 2rpx solid #fff;
					border-radius: 40rpx;
					height: 40rpx;
					background: #363A45;
					margin: 20rpx auto 0;
					position: relative;
					overflow: hidden;
					width: 300rpx;

					.poi-tips-num2-box {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 24rpx;
						width: 100%;
						position: relative;
						z-index: 999;
					}

					.poi-tips-num2-poi {
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						background: #ff6c00;
					}
				}
			}
		}

		.gemsbot {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 30rpx;

			image {
				height: 55rpx;
			}
		}

		.gemstone-btn {
			// margin-top: 20rpx;
			height: 110rpx;
			// background: linear-gradient(0deg, #4B4E71, #8D90B1);
			// box-shadow: 0px 3rpx 20rpx 0px rgba(0, 0, 0, 0.04);
			// opacity: 0.8;
			padding-top: 20rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			margin: 30rpx 30rpx 30rpx;
			background-size: cover;

			image {
				width: 45rpx;
				height: 45rpx;
				margin-right: 12rpx;
				margin-left: 12rpx;
			}

			.t-txt {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin-right: 32rpx;
			}
		}

		.b-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 30rpx 30rpx 30rpx;
			
					
			.b-item {
				width: 50%;
				height: 125rpx;
				// opacity: 0.8;
				// border-radius: 20rpx 20rpx 0px 0px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-size: cover;
				background-repeat: no-repeat;
				color: #FFFFFF;
			}

			.b-hover {
				background: #E11B37;
				opacity: 1;
			}
		}

		.bttom-box {
			min-height: 200rpx;
			// background: #363A45;
			// border-radius: 20rpx;
			margin: 0 30rpx;
			padding-bottom: 40rpx;
			// background: url('https://hhh.bhyt028.com/static/img/card/bg-c.png') center;
background-repeat: repeat-y;
    background-size: 100%;
			.bb-num {
				margin: 0 16rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bb-item {
					display: flex;
					align-items: center;
					padding-top: 10rpx;
					background: rgba(32, 32, 44, .8);
					border-radius: 20rpx;
					width: 320rpx;
					padding-left: 20rpx;

					.left {
						width: 90rpx;
						height: 90rpx;
						text-align: center;
						margin-right: 32rpx;

						image {
							height: 90rpx;
						}
					}

					.right {
						.bbr-txt {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
						}

						.bbr-bottom {
							margin-top: 10rpx;
						}
					}
				}
			}

			.bottom-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10rpx 30rpx 0;

				.left {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				.right {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}
			}

			.bottom-title-1 {
				margin-top: 25rpx;

				.left {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				.right {
					opacity: .7;

					text {
						margin-right: 6rpx;
					}
				}
			}

			.bottom-title-0 {
				.left {
					font-size: 28rpx;
				}
			}

			.more {
				margin: 10rpx 55rpx 0;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 112rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.ti-bg-info {
				height: 120rpx;
				margin: 20rpx 5rpx 0;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.payCard {
			height: 80rpx;
			padding: 10rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.p-left {
				width: 70%;
				height: 100%;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				color: #FFFFFF;
				font-size: 26rpx;

				image {
					height: 60rpx;
					margin: 0 30rpx;
				}
			}

			.p-right {
				background: linear-gradient(0deg, #F9D6AE 0%, #FBE3C4 100%);
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 160rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
			}
		}

		.p-content {
			width: 100%;
			height: 100%;
			position: relative;

			.cc-center {
				padding: 0 20rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				min-width: 180rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				background: linear-gradient(0deg, #F9D6AE 0%, #FBE3C4 100%);
				border-radius: 6rpx;

				text {
					margin-left: 10rpx;
				}
			}
		}


		.t-item-box {
			// position: absolute;
			// left: 30rpx;
			// bottom: 40rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			image {
				width: 50rpx;
				animation: myfirst 2s linear infinite;
			}

			.txt {
				font-size: 26rpx;
				color: #FFFFFF;
				animation: ani 2s linear infinite;
			}
		}

		@keyframes myfirst {
			0% {
				transform: rotateX(0);
			}

			50% {
				transform: rotateX(40deg);
			}

			100% {
				transform: rotateX(0);
			}
		}

		@keyframes ani {
			0% {
				transform: translateY(0);
				opacity: 1;
			}

			100% {
				transform: translateY(-60rpx);
				opacity: 0;
			}
		}

		.ljshop {
			width: 360rpx
		}

		.b-img {
			margin: 0 30rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		// height: 112rpx;
			height: 40rpx;
			// image {
			// 	height: 43rpx;
			// }
		}
	}
</style>